// Export color constants
export const normalTextColor = 'text.primary';
export const contrastTextColor = 'common.white';
export const normalHeaderColor = 'primary.main';
export const normalIconColor = 'primary.main';

// Icon styles
export const iconSx = (darkMode, iconColor = normalIconColor) => ({
  fontSize: { xs: 40, sm: 50, md: 60 },
  mb: 2
});

// Large header styles
export const largeHeaderSx = (darkMode, textColor = normalHeaderColor) => ({
  mb: 3,
  fontSize: { xs: '2rem', sm: '2.5rem', md: '3rem' }, // Adjust these values as needed
  letterSpacing: 'h2.letterSpacing',
  lineHeight: 'h2.lineHeight',
  fontWeight: "800"
});

// Small header styles
export const smallHeaderSx = (darkMode, textColor = normalTextColor) => ({
  fontSize: { xs: '1rem', sm: '1.25rem', md: '1.5rem' },
  fontWeight: "bold",
  mb: 1
});

// Button styles
export const buttonSx = (darkMode, textColor = normalTextColor) => ({
  fontSize: { xs: '1rem', sm: '1.1rem', md: '1.25rem' },
  fontWeight: 'bold',
  my: 2
});

// List item styles
export const listItemSx = (darkMode, textColor = normalTextColor) => ({
  fontSize: { xs: '0.85rem', sm: '0.9rem', md: '1rem' }
});